<template>
  <div id="menuItem">
    <!--有下级列表-->
    <el-submenu
      v-if="haveChild"
      :index="item.menuId.toString()"
      :route="{ path: item.url, query: { mId: item.menuId } }"
    >
      <template slot="title">
        <!-- <i :class="['iconfont',item.icon]" v-if="item.icon"></i>-->
        <i v-if="item.icon" :class="item.icon"></i>
        <span>{{ item.menuName }}</span>
      </template>
      <menuItem
        v-for="child in item.children"
        :key="child.menuName"
        :item="child"
      >
      </menuItem>
    </el-submenu>
    <!--无下级列表-->
    <el-menu-item
      v-else
      :index="item.menuId.toString()"
      :route="{ path: item.url, query: { mId: item.menuId } }"
    >
      <i v-if="item.icon" :class="item.icon"></i>
      <span>{{ item.menuName }}</span>
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  msg: '左侧菜单-组件',
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  computed: {
    haveChild() {
      return this.item.children && this.item.children.length > 0
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="less">
#menuItem {
  .el-submenu__title i {
    vertical-align: middle;
    margin-right: 24px;
  }
  .el-submenu__icon-arrow {
    right: -13px;
  }
}
</style>
